<template>
	<view class="chart-person">
		<Card title="操作日志">
			<t-steps :current="list.length" layout="vertical" readonly>
				<t-step-item v-for="item, index in list" :key="index" :title="item.nrxx" :content="item.cjsj">
					<template #icon>
						<!-- <t-icon name="" size="28" /> -->
						<view class="step-dot"></view>
					</template>
				</t-step-item>
			</t-steps>
		</Card>
	</view>
</template>

<script setup>
	import { ref, onMounted, defineProps } from "vue"
	import Card from '@/components/Card'
	
	const props = defineProps({
		currItem: {},
	})
	
	onMounted(() => {
		getList();
	})
	
	const list = ref([]);
	
	const getList = () => {
		list.value = [
			{ nrxx: '张三邀请基管中心李四加入聊天', cjsj: '2025-01-15 17:05:47' },
			{ nrxx: '基管中心李四接受邀请', cjsj: '2025-01-15 17:05:47' },
			{ nrxx: '基管中心李四邀请王五加入聊天', cjsj: '2025-01-15 17:05:47' },
			{ nrxx: '基管中心李四邀请王五加入聊天', cjsj: '2025-01-15 17:05:47' },
		]
	}
</script>

<style lang="scss" scoped>
.chart-person {
	:deep(.t-step-item__line--vertical) {
		transform: scaleY(1.5);
	}
	
	:deep(.t-step-item__content--vertical) {
		padding-bottom: 20px;
	}
	
	:deep(.t-step-item__title--vertical) {
		color: #444444;
		font-size: 16px;
	}
	
	:deep(.t-step-item__description) {
		font-size: 14px;
	}
	
	.step-dot {
		position: relative;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background-color: var(--td-brand-color);
		
		&::before {
			content: '';
			z-index: 2;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #fff;
		}
		
		&::after {
			content: '';
			z-index: 3;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 12px;
			height: 12px;
			border-radius: 50%;
			background-color: var(--td-brand-color);
		}
	}
}
</style>